<template>
    <div>
        <el-form ref="userFormRef" :model="userForm" status-icon :rules="rules" label-width="120px" class="userForm">
            <div class="form">
                <el-form-item label="用户名">
                    <el-input :value="userForm.username" disabled type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="userForm.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="userForm.nickname" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userForm.email" type="email" autocomplete="off" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userForm.phone" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="用户角色" prop="role">
                    <el-select v-model="userForm.role" class="m-2" placeholder="请选择角色" size="large">
                        <el-option v-for="item in roles" :key="item.name" :label="item.text" :value="item.name" />
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <!-- auto-upload 自动上传 -->
                <el-upload class="avatar-uploader" ref="uploadAvatar"
                    action="http://120.76.247.5:2001/api/upload/avatar" name="avatar" :data="{ userid: userID }"
                    :headers="{ Authorization: store.state.userStore.Authorization }" :auto-upload="false"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                    :on-change="handleChange">
                    <img v-if="imageUrl" width="100" :src="imageUrl" class="avatar" />
                    <el-avatar v-else shape="square" :size="150"
                        src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
                </el-upload>
            </div>
        </el-form>
        <div class="btn">
            <el-button type="primary" @click="addUser(userFormRef)">保存修改</el-button>
        </div>
    </div>
</template>
  
<script setup>
import http from '@/utils/http.js'
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
let store = useStore();//this.$store
let router = useRouter();//this.$router
let route = useRoute();
let userFormRef = ref(null);
//修改用户获取用户信息
let userID = ref("");
userID.value = route.params.id;
let editUser = await http.get(`/user/${userID.value}`);
let userForm = reactive(editUser);
let regUserID = ref(0);
let uploadAvatar = ref(null);//ref关联el-upload组件
let roles=[{name:"admin",text:"管理员"},{name:"member",text:"普通用户"},{name:"super",text:"超级管理"}]
let rules = reactive({
    nickname: [
        { min: 3, max: 20, message: "昵称长度3-20字符", trigger: "blur" },
    ],
    password: [
        { min: 3, max: 20, message: "密码长度3-20字符", trigger: "blur" },
    ],
    email: [
        { type: "email", message: "邮箱格式不正确", trigger: "blur" },
    ],
    phone: [
        { pattern: /^1[3456789]\d{9}$/, message: "电话号码格式不正确", trigger: "blur" },
    ]
})
let imageUrl = ref('http://120.76.247.5:2001' + editUser.avatar);//存储上传文件的链接地址
let handleAvatarSuccess = (result) => { }
let beforeAvatarUpload = (file) => { //File文件对象 可以转化为blob二进制显示
    // console.log('beforeFile',file)
    if (file.type !== "image/jpeg") {
        ElMessage({
            type: "error",
            message: "只能上传jpg图片"
        });
        return false;
    }
    if (file.size / 1024 / 1024 > 1) {
        ElMessage({
            type: "error",
            message: "只能上传最大1MB的图片"
        });
        return false;
    }
    // imageUrl.value=URL.createObjectURL(file);
    return true;
}
let handleChange = (file) => {
    // console.log('handleChange',file)
    imageUrl.value = URL.createObjectURL(file.raw);
}
let addUser = (userFormRef) => {
    userFormRef.validate(async (ispass) => {
        if (ispass) {
            let re = await http.patch("/user/" + userID.value, {
                nickname: userForm.nickname,
                phone: userForm.phone,
                email: userForm.email,
                password: userForm.password,
                role:userForm.role
            });
            // console.log("添加结果===>",re);
            ElMessage({
                type: "success",
                message: "用户保存成功!"
            });
            regUserID.value = re.id;//
            uploadAvatar.value.submit();//手动提交上传组件 上传文件
            router.push("/manage/user/list");
        } else {
            console.log("验证未通过");
        }
    });
}
</script>
  
<style lang="scss" scoped>
.userForm {
    width: 500px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: space-between;

    div {
        &.form {
            width: 300px;
        }
    }
}

.btn {
    text-align: center;
}
</style>